<template>
	<view class="box" v-if="info">
		<view class="hb" v-if="type == 1">
			<!-- <image :src="info.first_floor"></image> -->
			<image :src="info.first_floor" mode="" style="width: 690rpx;height: 1638rpx;top: 0;right: 0;position: absolute;z-index: 5"></image>
			<!-- <u--image width="690rpx" height="1638rpx" style=";top: 0;right: 0;position: absolute;z-index: 5" :src="info.first_floor" :lazy-load="true" @click="toPage(it)"></u--image> -->
			<image :src="cropperUrl" style="width: 100%;position: absolute;top: 0;right: 0;z-index: 4;" mode="widthFix"></image>
			<image v-if="isChecked" :src="info.user_QR_code" :style="{width: '100rpx',height: '100rpx',bottom: '30rpx',right: '30rpx',position: 'absolute',zIndex: '10',}"></image>
			<view style="width: 100%;height: 220rpx;top: 840rpx;right: 0;position: absolute;z-index: 7;">
				<view style="width: 100%;">
					<text class="painter-name1" :style="{ color: info.name_colour }">{{info.nickname}}</text>
				</view>
				<view style="width: 100%;">
					<text class="painter-tx2" :style="{ color: info.identity_colour }">{{info.name != '无' ? info.name : ''}}</text>
				</view>
			</view>
			<view style="width: 100%;height: 220rpx;top: 1084rpx;right: 0;position: absolute;z-index: 7;"> 
				<view style="width: 582rpx;padding-left: 78rpx;">
					<text :style="{textAlign: 'left',width: '100%',fontSize: '40rpx',color: info.multiline_colour_one,lineHeight: '70rpx'}">{{value1}}</text>
				</view>
			</view>
		</view>
		<view class="hb" v-if="type == 2">
			<!-- <image :src="info.first_floor"></image> -->
			<image :src="info.first_floor" mode="" style="width: 690rpx;height: 1638rpx;top: 0;right: 0;position: absolute;z-index: 5"></image>
			<image :src="cropperUrl" style="width: 600rpx;height: 600rpx; position: absolute;top: 310rpx;left: 45rpx;z-index: 4;"></image>
			<image v-if="isChecked" :src="info.user_QR_code" :style="{width: '100rpx',height: '100rpx',bottom: '30rpx',right: '30rpx',position: 'absolute',zIndex: '10',}"></image>
			<view style="width: 100%;height: 220rpx;top: 90rpx;right: 0;position: absolute;z-index: 7;">
				<view style="width: 100%;text-align: right;margin-bottom: 10rpx">
					<text class="painter-name3" :style="{ color: info.name_colour }">{{info.nickname}}</text>
				</view>
				<view style="width: 100%;text-align: right;">
					<text class="painter-tx4" :style="{ color: info.identity_colour }">{{info.name != '无' ? info.name : ''}}</text>
				</view>
			</view>
			<view style="width: 100%;top: 870rpx;right: 0;position: absolute;z-index: 7;"> 
				<view style="padding-left: 60rpx;margin-bottom: 60rpx;font-weight: bold;">
					<text :style="{textAlign: 'left',width: '100%',fontSize: '60rpx',color: info.multiline_colour_one,lineHeight: '70rpx'}">{{value3}}</text>
				</view>
				<view style="width: 570rpx;padding-left: 60rpx;margin-bottom: 60rpx;">
					<text :style="{textAlign: 'left',width: '100%',fontSize: '40rpx',color: info.multiline_colour_one,lineHeight: '45rpx'}">{{value1}}</text>
				</view>
				<view style="width: 570rpx;padding-left: 60rpx;">
					<text :style="{textAlign: 'left',width: '100%',fontSize: '40rpx',color: info.multiline_colour_two,lineHeight: '45rpx'}">{{value2}}</text>
				</view>
			</view>
		</view>
		<!--  -->
		<l-painter :board="template" style="width: 100%;" ref="painterRef" custom-style="position: fixed; left: 200%"/>
		<view class="help" @click="toRule">
			<image :src="ossUrl +  '/static/image/wenhao.png'" mode=""></image>
			帮你快速制作海报
		</view>
		
		<view class="form">
			<view class="form-title">
				上传封面照片
			</view>
			<view class="form-input">
				<view class="form-input-c">
					<view class="form-input-c-item">
						<view class="form-input-l-label">图片</view>
						<view class="upload">

							<image class="upload-item" :src="cropperUrl" mode="aspectFill" @click="upload"
								v-if="cropperUrl"></image>
							<view class="upload-item-add" @click="upload" v-else>
								<image :src="ossUrl + `/static/5.png`" mode=""></image>
							</view>
							<!-- <view class="upload-item-img">
								<image src="/static/图层 2.png" mode=""></image>
							</view> -->
						</view>
					</view>
				</view>

			</view>
		</view>
		<view class="form" v-if="type == 2">
			<view class="form-title">
				标题
			</view>
			<view class="form-input">
				<input type="text" placeholder="请输入" placeholder-class="placeholderItem" v-model="value3" @input="e=>confirm(e,'value3')"/>
			</view>
		</view>
		<view class="form">
			<view class="form-title form-title-sp">
				填写简介
				<view @click="isChecked = !isChecked">
					<image :src="isChecked ? ossUrl + '/static/image/g1.png': ossUrl + '/static/image/2.png'" mode=""></image>
					开启名片二维码
				</view>
			</view>
			<view class="form-input textarea" v-if="type == 1 || type == 2">
				<textarea placeholder="在这填写你的简介" placeholder-class="textarea-ac" v-model="value1"
					@input="e=>confirm(e,'value1')" :cursor-spacing="85" maxlength="90"></textarea>
			</view>
			<view class="form-input textarea" v-if="type == 2">
				<textarea placeholder="在这填写你的简介" placeholder-class="textarea-ac" v-model="value2"
					@input="e=>confirm(e,'value1')" :cursor-spacing="85"  maxlength="90"></textarea>
			</view>
		</view>
		<view class="btns" @click="submit">保存</view>
	</view>
</template>

<script>
	import {
		ossUpload, ossDel
	} from '@/common/oss.js'
	import {
		InformationAddPoster,InformationPosterDesign
	} from '@/common/http/api.js'
	export default {
		data() {
			return {
				info: '',
				template: {},
				//模板
				type: 1,
				value1: '',
				value2: '',
				//标题
				value3: '',
				isChecked: true,
				id: '',
				editId: ''
			}
		},
		onLoad(e) {
			if(e.id) {
				this.id = e.id
			}
			
			//清空裁剪的图片
			this.$store.commit('setCropperUrl', '')
			InformationPosterDesign({id: e.id}).then(res=>{
				this.info = res.data
				this.type = this.info.type
				
				console.log(this.type)
				
				this.init()
				if(e.type == 1) {
					this.editId = e.editId
					let form = uni.getStorageSync('posterForm')
					this.value1 = form.value1
					this.value2 = form.value2
					this.value3 = form.value3
					this.isChecked = form.isChecked
					this.$store.commit('setCropperUrl', form.cropperUrl)
				}
			})
			
			
			
		},
		computed: {
			cropperUrl() {
				return this.$store.state.cropperUrl
			}
		},
		watch: {
			cropperUrl: {
				handler(val) {
					this.init()
				},
				deep: true
			}
		},
		methods: {
			init() {
				if (this.type == 1) {
					this.template = {
						css: {
							// 根节点若无尺寸，自动获取父级节点
							width: '690rpx',
							height: '1638rpx'
						},
						views: [
							//底图
							{
								type: 'image',
								src: this.info.first_floor,
								css: {
									width: '100%',
									height: '100%',
									top: "0",
									right: "0",
									position: "absolute",
									zIndex: '5',
								}
							},
							//头像
							{
								type: 'image',
								src: this.cropperUrl,
								css: {
									width: '100%',

									top: "0",
									right: "0",
									position: "absolute",
									zIndex: '4',

								}
							},
							//二维码
							{
								type: 'image',
								src: this.info.user_QR_code,
								css: {
									width: '100rpx',
									height: '100rpx',
									bottom: "30rpx",
									right: "30rpx",
									position: "absolute",
									zIndex: '10',
									display: this.isChecked ? '' : 'none'
								}
							},
							//基本信息
							{
								type: 'view',
								css: {
									width: '100%',
									height: '220rpx',
									top: "840rpx",
									right: "0",
									position: "absolute",
									zIndex: '7',
								},
								views: [{
										type: 'view',
										css: {
											width: '100%'
										},
										views: [{
											type: 'text',
											text: this.info.nickname,
											css: {
												// 设置右对齐
												textAlign: 'left',
												lineClamp: 1,
												paddingLeft: '78rpx',
												fontSize: '90rpx',
												fontWeight: 'bold',
												color: this.info.name_colour
											}
										}, ]
									},
									{
										type: 'view',
										css: {
											width: '100%'
										},
										views: [{
											type: 'text',
											text: this.info.name,
											css: {
												// 设置右对齐
												textAlign: 'left',
												lineClamp: 1,
												paddingLeft: '310rpx',
												fontSize: '48rpx',
												fontWeight: 'bold',
												color: this.info.identity_colour,
												display: this.info.name  != '无' ? '' : 'none'
											}
										}, ]
									}
								]
							},
							//段落
							{
								type: 'view',
								css: {
									width: '100%',
									height: '220rpx',
									top: "1084rpx",
									right: "0",
									position: "absolute",
									zIndex: '7',
								},
								views: [{
									type: 'view',
									css: {
										width: '582rpx',
										paddingLeft: '78rpx',
									},
									views: [{
										type: 'text',
										text: this.value1,
										css: {
											// 设置右对齐
											textAlign: 'left',
											width: '100%',
											fontSize: '40rpx',
											color: this.info.multiline_colour_one,
											lineHeight: '70rpx'
										}
									}, ]
								}]
							}
						]
					}
				}
				if (this.type == 2) {
					this.template = {
						css: {
							// 根节点若无尺寸，自动获取父级节点
							width: '690rpx',
							height: '1638rpx'
						},
						views: [
							//底图
							{
								type: 'image',
								//src: this.info.first_floor,
								src: this.info.first_floor,
								//src: this.info.first_floor,
								css: {
									width: '100%',
									height: '100%',
									top: "0",
									right: "0",
									position: "absolute",
									zIndex: '5',
								}
							},
							//头像
							{
								type: 'image',
								src: this.cropperUrl,
								css: {
									width: '600rpx',
									height: '600rpx',
									left: "45rpx",
									top: "310rpx",
									position: "absolute",
									zIndex: '4',

								}
							},
							//二维码
							{
								type: 'image',
								src: this.info.user_QR_code,
								css: {
									width: '100rpx',
									height: '100rpx',
									bottom: "30rpx",
									right: "30rpx",
									position: "absolute",
									zIndex: '10',
									display: this.isChecked ? '' : 'none'
								}
							},
							//基本信息
							{
								type: 'view',
								css: {
									width: '100%',
									height: '220rpx',
									top: "90rpx",
									right: "0",
									position: "absolute",
									zIndex: '7',
								},
								views: [
									{
										type: 'view',
										css: {
											width: '100%',
											textAlign: 'right',
											marginBottom: '10rpx'
										},
										views: [{
											type: 'text',
											text: this.info.nickname,
											css: {
												// 设置右对齐
												
												lineClamp: 1,
												paddingRight: '150rpx',
												fontSize: '90rpx',
												fontWeight: 'bold',
												color: this.info.name_colour,
												width: '100%'
											}
										}, ]
									},
									{
										type: 'view',
										css: {
											width: '100%',
											textAlign: 'right',
										},
										views: [{
											type: 'text',
											text: this.info.name,
											css: {
												// 设置右对齐

												lineClamp: 1,
												paddingRight: '50rpx',
												fontSize: '48rpx',
												fontWeight: 'bold',
												color: this.info.identity_colour
											}
										}, ]
									}
								]
							},
							//段落
							{
								type: 'view',
								css: {
									width: '100%',
									// height: '220rpx',
									top: "870rpx",
									right: "0",
									position: "absolute",
									zIndex: '7'
								},
								views: [
									{
										type: 'view',
										css: {
											width: '570rpx',
											paddingLeft: '60rpx',
											marginBottom: "60rpx"
										},
										views: [{
											type: 'text',
											//text: this.value1,
											text: this.value3,
											css: {
												// 设置右对齐
												
												textAlign: 'left',
												width: '100%',
												fontSize: '60rpx',
												color: this.info.multiline_colour_one,
												lineHeight: '70rpx',
												fontWeight: 'bold'
											}
										}, ]
									},
									{
										type: 'view',
										css: {
											width: '570rpx',
											paddingLeft: '60rpx',
											marginBottom: "60rpx"
										},
										views: [{
											type: 'text',
											//text: this.value1,
											text: this.value1,
											css: {
												// 设置右对齐
												textAlign: 'left',
												width: '100%',
												fontSize: '40rpx',
												color: this.info.multiline_colour_one,
												lineHeight: '45rpx'
											}
										}, ]
									},
									{
										type: 'view',
										css: {
											width: '570rpx',
											paddingLeft: '60rpx',
										},
										views: [{
											type: 'text',
											//text: this.value1,
											text: this.value2,
											css: {
												// 设置右对齐
												textAlign: 'left',
												width: '100%',
												fontSize: '40rpx',
												color: this.info.multiline_colour_two,
												lineHeight: '45rpx'
											}
										}, ]
									},
								]
							}
						]
					}
				}

			},
			confirm(e, name) {
				this.init()
			},
			upload() {
				uni.navigateTo({
					url: '/pagesC/clipper/clipper?w=' + this.info.wide + '&h=' + this.info.tall + '&type=1'
				})
			},
			toRule(){
				uni.navigateTo({
					url:'/pagesA/aboutUs/aboutUs?id=12'
				})
			},
			submit(){
				if(this.cropperUrl === '') {
					uni.showToast({duration:3000,
						title:'请上传形象照',
						icon:'none'
					})
					return
				}
				this.$refs.painterRef.canvasToTempFilePathSync({
				  fileType: "jpg",
				  // 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
				  pathType: 'url',
				  quality: 1,
				  success: (res) => {
				    console.log(res.tempFilePath);
				    // 非H5 保存到相册
				    // H5 提示用户长按图另存
				    ossUpload(res.tempFilePath).then(res => {
						let business_card_img = res.url
						let data = {
							img:business_card_img,
							poster_design_id: this.id,
							parameter:{
								value1: this.value1,
								value2: this.value2,
								value3: this.value3,
								isChecked: this.isChecked,
								cropperUrl: this.cropperUrl
							},
							type: 1 //1系统新增 2已有海报
						}
						if(this.editId) {
							data['id'] = this.editId
						}
						console.log('data',data)
						uni.showLoading()
						InformationAddPoster(data).then(res=>{
							uni.hideLoading()
							uni.showToast({duration:3000,
								title:'保存成功',
								icon: 'none'
							})
							uni.navigateBack()
						})
				    }).catch(err => {
				    	uni.showToast({duration:3000,
				    		title: '上传失败！',
				    		icon: 'none'
				    	})
				    })
				  },
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F6F7F8;
	}

	image {
		width: 100%;
		height: 100%;
	}

	.box {
		padding-bottom: 30rpx;
	}

	.hb {
		margin: 30rpx;
		margin-bottom: 50rpx;
		position: relative;
		width: 690rpx;
		height: 1638rpx;
		overflow: hidden;
		// &>image {
		// 	width: 690rpx;
		// 	height: 1638rpx;
		// 	position: absolute;
		// 	left: 30rpx;
		// 	top: 30rpx;
		// 	z-index: -1;
		// }
	}

	.form {
		width: 690rpx;
		margin: 0 auto;
		margin-bottom: 30rpx;

		.form-title {
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 30rpx;
			color: #131313;
			margin-bottom: 26rpx;
			display: flex;
			align-items: center;

		}

		.form-title-y {
			width: 39rpx;
			height: 39rpx;
			background: #FFC000;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 20rpx;
			color: #FFFFFF;
			margin-left: 13rpx;
		}

		.form-title-u {
			width: 39rpx;
			height: 39rpx;
			background: #0084FF;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 20rpx;
			color: #FFFFFF;
			margin-left: 13rpx;
		}

		.form-input {
			width: 100%;

			&>input {
				width: 690rpx;
				height: 80rpx;
				background: #F0F0F0;
				border-radius: 30rpx;
				box-sizing: border-box;
				padding: 0 30rpx;
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #000;
			}

		}
		.placeholderItem {
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #666666;
		}
		.upload {
			width: 200rpx;
			height: 140rpx;

			border-radius: 6rpx;

			.upload-item-add {
				background: #F0F0F0;
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
			
				image {
					width: 32rpx;
					height: 32rpx;
				}
			}
		}

		.form-input-c {
			width: 100%;
			display: flex;
			align-items: center;

			.form-input-c-item {
				display: flex;
				align-items: center;
				justify-content: center;

				.form-input-l-label {
					font-family: PingFang SC;
					font-weight: 300;
					font-size: 24rpx;
					color: #666666;
					display: flex;
					align-items: center;
					margin-right: 20rpx;
				}
			}
		}

		.radio {
			display: flex;
			flex-wrap: wrap;

			.radio-item {
				height: 53rpx;
				border-radius: 26rpx;
				border: 1px solid #999999;
				padding: 14rpx 48rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #666666;
				margin-right: 20rpx;
				margin-bottom: 20rpx;
			}

			.radio-item-ac {
				background: #12B475;
				border-radius: 26rpx;
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #FFFFFF;
				border: none;
			}
		}

		.textarea {
			margin-bottom: 30rpx;

			textarea {
				width: 100%;
				height: 160rpx;
				background: #EEEEEE;
				box-sizing: border-box;
				padding: 29rpx 26rpx;
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #000;
			}

			.textarea-ac {
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #999999;
			}
		}

		.price {
			.price-input {
				display: flex;
				align-items: center;

				input {
					font-family: Adobe Heiti Std;
					font-weight: normal;
					font-size: 32rpx;
					color: #FF4B4B;
					width: 321rpx;
					height: 74rpx;
					background: #FFFFFF;
					display: flex;
					align-items: center;
					box-sizing: border-box;
					padding: 0 25rpx;
					margin-right: 20rpx;
				}

				font-family: PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #131313;
			}
		}
	}

	.btns {
		width: 660rpx;
		height: 86rpx;
		background: #12B475;
		border-radius: 43rpx;
		display: flex;
		align-items: center;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.form-title-sp {
		display: flex;
		justify-content: space-between;
		align-items: center;

		&>view {
			display: flex;
			align-items: center;
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #131313;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 10rpx;
			}
		}
	}
	.painter-name1 {
		text-align: left;
		padding-left: 78rpx;
		font-size: 90rpx;
		font-weight: bold;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.painter-tx2 {
		text-align: left;
		padding-left: 310rpx;
		font-size: 48rpx;
		font-weight: bold;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		
	}
	.painter-name3 {
		width: calc(100% - 150rpx);
		padding-right: 150rpx;
		font-size: 90rpx;
		font-weight: bold;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.painter-tx4 {
		width: calc(100% - 50rpx);
		padding-right: 50rpx;
		font-size: 48rpx;
		font-weight: bold;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.help {
		width: 750rpx;
		height: 71rpx;
		background: #FFFFFF;
		box-sizing: border-box;
		padding: 22rpx 69rpx;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #12B475;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin-bottom: 40rpx;
		image {
			width: 32rpx;
			height: 33rpx;
			margin-right: 10rpx;
		}
	}
</style>